<script>
import { defineComponent, getCurrentInstance } from "vue";

export default defineComponent({
  props: {
    that: Object,
  },
  setup(props) {
    return { that: props.that };
  },
  render() {
    let that = this.that;
    return (
      <a-collapse bordered={false}>
        <a-collapse-panel header="阴影">
          <div class="styleValue">
            <span>颜色</span>
            {
              // <el-color-picker
              //   value={this.$store.state.aimAttrs.boxShadow.color}
              //   show-alpha
              //   predefine={this.predefineColors}
              //   on={{
              //     change: (e) => {
              //       this.$store.commit("aimAttrsChange", {
              //         newValue: e,
              //         attrsName: "boxShadow-color",
              //         that,
              //       });
              //     },
              //   }}
              // ></el-color-picker>
            }
          </div>
          <div class="styleValue">
            <span>X轴</span>
            <a-input-number
              value={this.$store.state.aimAttrs.boxShadow.hShadow}
              formatter={(value) => `${value}px`}
              parser={(value) => value.replace("p", "").replace("x", "")}
              style={{ width: "180px" }}
              onChange={(e) => {
                if (e == null) return;

                this.$store.commit("aimAttrsChange", {
                  newValue: e,
                  attrsName: "boxShadow-hShadow",
                  that,
                });
              }}
            ></a-input-number>
          </div>
          <div class="styleValue">
            <span>Y轴</span>
            <a-input-number
              value={this.$store.state.aimAttrs.boxShadow.vShadow}
              formatter={(value) => `${value}px`}
              parser={(value) => value.replace("p", "").replace("x", "")}
              style={{ width: "180px" }}
              onChange={(e) => {
                if (e == null) return;

                this.$store.commit("aimAttrsChange", {
                  newValue: e,
                  attrsName: "boxShadow-vShadow",
                  that,
                });
              }}
            ></a-input-number>
          </div>
          <div class="styleValue">
            <span>模糊距离</span>
            <a-input-number
              value={this.$store.state.aimAttrs.boxShadow.blur}
              formatter={(value) => `${value}px`}
              parser={(value) => value.replace("p", "").replace("x", "")}
              style={{ width: "180px" }}
              onChange={(e) => {
                if (e == null) return;

                this.$store.commit("aimAttrsChange", {
                  newValue: e,
                  attrsName: "boxShadow-blur",
                  that,
                });
              }}
            ></a-input-number>
          </div>
          <div class="styleValue">
            <span>阴影大小</span>
            <a-input-number
              value={this.$store.state.aimAttrs.boxShadow.spread}
              formatter={(value) => `${value}px`}
              parser={(value) => value.replace("p", "").replace("x", "")}
              style={{ width: "180px" }}
              onChange={(e) => {
                if (e == null) return;

                this.$store.commit("aimAttrsChange", {
                  newValue: e,
                  attrsName: "boxShadow-spread",
                  that,
                });
              }}
            ></a-input-number>
          </div>
        </a-collapse-panel>
      </a-collapse>
    );
  },
});
</script>
